/* eslint-disable react-hooks/exhaustive-deps */

import React ,{useState,useEffect}from 'react'
import {useParams} from "react-router-dom"
import {getDetail} from "../../api"
import Map from "../../components/Map"
import {APILoader} from '@uiw/react-baidu-map'

function Index() {
    const parmers=useParams()
    const [info,setInfo]:any=useState({})
    const getAndSet=async()=>{
        const resp=await getDetail(parmers)
        setInfo(resp.data)
    }

    const [isCollect,setIsCollect]=useState(false)
    useEffect(()=>{
        getAndSet()
    },[])
    const collect=()=>{
        let collectList:any=localStorage.getItem('collectList')
        if(collectList){
            collectList=JSON.parse(collectList)

            if(collectList.some((v:string)=>v===info.id)){
                setIsCollect(false)
                collectList=collectList.filter((item:string)=>item!==info.id)
            }else{
                setIsCollect(true)
                collectList.push(info.id)
            }
        }else{
            collectList=[info.id]
            // console.log(collectList)
        }
        localStorage.setItem('collectList',JSON.stringify(collectList))
        setIsCollect(!isCollect)
    }
    return (
        
        <div>
            <dl>
                <dt><img src={info.img} alt="" /></dt>
                <dd>
                    <h4>{info.title}</h4>
                    <p>{info.desc}</p>
                    <button onClick={()=>collect()}>{isCollect?'收藏':'取消收藏'}</button>
                </dd>
            </dl>
            <div>
                地址：{info.city}
                <div style={{ width: '100%' }}>
                <APILoader akay="ce4hDCIGT7fq3cW0nBBmBwnG9Uwf7Y1p">
                <Map address={info.city}/>
                </APILoader>
            </div>
            </div>
        </div>
    )
}

export default Index
